<template>
  <el-row class="right-menu" type="flex">
    <el-col class="user-label"> 角色：{{ role }}，用户：{{ Uname }}</el-col>
    <el-col class="user-avatar">
      <el-dropdown class="avatar-container" trigger="click">
        <div class="avatar-wrapper">
          <img src="@/assets/img/smile.jpg" class="user-avatar" />
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <!-- <el-dropdown-item>
          {{ Uname }}
        </el-dropdown-item> -->
          <!--        <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">-->
          <!--          <el-dropdown-item>Github</el-dropdown-item>-->
          <!--        </a>-->
          <!--        <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">-->
          <!--          <el-dropdown-item>Docs</el-dropdown-item>-->
          <!--        </a>-->
          <el-dropdown-item divided>
            <span @click="clearCookie">注销</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-col>
  </el-row>
</template>

<script>
import { clearCookie } from '@/util/help'
import { GetName } from '@/api/module/gettreedata'
import Cookie from 'js-cookie'
export default {
  name: 'head-portrait',
  mounted() {
    this.getName()
    this.role = Cookie.get('role')
  },
  methods: {
    getName() {
      GetName()
        .then((res) => {
          this.Uname = res.data.username
          console.log(this.Uname)
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    clearCookie() {
      clearCookie()
      this.$router.push('/')
    },
  },
  data() {
    return {
      Uname: '',
      role: '',
    }
  },
}
</script>

<style lang="scss" scoped>
.right-menu {
  height: 100%;
  line-height: 50px;
  padding-right: 220px;

  .user-label {
    text-align: right;
    width: 350px;
    font-size: 16px;
  }

  &:focus {
    outline: none;
  }

  // .right-menu-item {
  //   display: inline-block;
  //   padding: 0 8px;
  //   height: 100%;
  //   font-size: 18px;
  //   color: #5a5e66;
  //   vertical-align: text-bottom;

  //   &.hover-effect {
  //     cursor: pointer;
  //     transition: background 0.3s;

  //     &:hover {
  //       background: rgba(0, 0, 0, 0.025);
  //     }
  //   }
  // }
  .user-avatar {
    width: 80px;

    .avatar-container {
      padding: 0 20px;

      .avatar-wrapper {
        margin-top: 5px;
        position: relative;

        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 10px;
          background-color: #4d4279;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
